<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/template-web.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/stepData.js" type="text/javascript" charset="utf-8"></script>

		<link href="../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.mui-table-view-cell:after {
				height: 0
			}
			
			.mui-table-view-cell:before {
				height: 0
			}
		</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">奖品兑换</h1>
		</header>

		<div class="mui-content" id="pageContent">

			<ul class="mui-table-view ">

				<li class="mui-table-view-cell">
					<div class="mui-row">
						<span class="mui-col-sm-3 mui-col-xs-3"></span>
						<img src="{{@imgSrc}}" class="mui-col-sm-6 mui-col-xs-6" />
						<span class="mui-col-sm-3 mui-col-xs-3"></span>
					</div>

				</li>

				<li class="mui-table-view-cell">
					<img src="../images/step/7.jpg" style="width: 100%; height: 57vh;" />
				</li>

			</ul>

		</div>

		<script type="text/javascript">
			/**
			 * 对日期进行格式化，
			 * @param date 要格式化的日期
			 * @param format 进行格式化的模式字符串
			 *     支持的模式字母有：
			 *     y:年,
			 *     M:年中的月份(1-12),
			 *     d:月份中的天(1-31),
			 *     h:小时(0-23),
			 *     m:分(0-59),
			 *     s:秒(0-59),
			 *     S:毫秒(0-999),
			 *     q:季度(1-4)
			 * @return String
			 * @author yanis.wang
			 * @see	http://yaniswang.com/frontend/2013/02/16/dateformat-performance/
			 */

			template.defaults.imports.dateFormat = function(date, format) {

				if(typeof date === "string") {
					var mts = date.match(/(\/Date\((\d+)\)\/)/);
					if(mts && mts.length >= 3) {
						date = parseInt(mts[2]);
					}
				}
				date = new Date(date);
				if(!date || date.toUTCString() == "Invalid Date") {
					return "";
				}

				var map = {
					"M": date.getMonth() + 1, //月份
					"d": date.getDate(), //日
					"h": date.getHours(), //小时
					"m": date.getMinutes(), //分
					"s": date.getSeconds(), //秒
					"q": Math.floor((date.getMonth() + 3) / 3), //季度
					"S": date.getMilliseconds() //毫秒
				};

				format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
					var v = map[t];
					if(v !== undefined) {
						if(all.length > 1) {
							v = '0' + v;
							v = v.substr(v.length - 2);
						}
						return v;
					} else if(t === 'y') {
						return(date.getFullYear() + '').substr(4 - all.length);
					}
					return all;
				});
				return format;

			}
		</script>
		<script type="text/javascript">
			mui.init()

			var id = 0;
			window.addEventListener('awardId', function(event) {
				id = parseInt(event.detail.id);
				refresh();
			});

			function refresh() {
				var data = null;
				for(var i = 0; i < awardData.length; i++) {
					if(awardData[i].id == id) {
						data = awardData[i];
						break;
					}
				}
				if(!data) return;

				var html = template('pageContent', data);
				document.querySelector("#pageContent").innerHTML = html;
			}
		</script>
	</body>

</html>